<template>
    <div>
        <h1>测试webSocket</h1>
        <button @click="getWebsocket">点击请求后台数据</button>
    </div>
</template>
<script>
    export default {
        name: "websocket",
        created() { // 页面创建生命周期函数
            this.initWebSocket()
        },
        destroy() { // 离开页面生命周期函数
            this.websocketclose();
        },
        methods: {
            initWebSocket: function () {
                // WebSocket与普通的请求所用协议有所不同，ws等同于http，wss等同于https
                this.websock = new WebSocket("ws://localhost:8081/websocket/trend");
                this.websock.onopen = this.websocketonopen;
                this.websock.onerror = this.websocketonerror;
                this.websock.onmessage = this.websocketonmessage;
                this.websock.onclose = this.websocketclose;
            },
            websocketonopen: function () {
                console.log("WebSocket连接成功");
            },
            websocketonerror: function (e) {
                console.log("WebSocket连接发生错误");
            },
            websocketonmessage: function (e) {
                console.log(e.data);                // console.log(e);
            },
            websocketclose: function (e) {
                console.log("connection closed (" + e.code + ")");
            },
            getWebsocket:function(){
                let url = "/test/socket?shipId=DPS007";
                // 这里只是一个基于axios的ajax请求，你可以换成你的请求格式
                this.axios.get(url).then(res=>{
                    console.log("请求成功"+res.data)
                });
            }
        }
    }
</script>
<style lang="less" scoped>
</style>


